<template>
  <div class="slot-container">
    <SlotBox>
      <template v-slot:head="slotProps">
        <div>这里是head插槽内容==== {{slotProps.count}}</div>
      </template>
      <!-- <template v-slot:left-content>
        <div>
          left-content
        </div>
      </template> -->
      <template v-slot>
        <div>
          this is no name slot
        </div>
      </template>
      <template v-slot:bottom>
        <button @click="btnClick"> bottom </button>
      </template>
    </SlotBox>
  </div>
</template>

<script>
import SlotBox from './SlotBox.vue'
export default {
  name: 'SlotContainer',
  components:{
    SlotBox
  },
  data(){
    return {
    }
  },
  created(){
  },
  methods:{
    btnClick(){
      alert('按钮被点击了')
    }
  }
}
</script>

<style>
.slot-container{
  width: 100%;
  height: 100%;
}
</style>